<template>
  <div>
    <div id="container" style="width: 1100px; height: 520px"></div>
  </div>
</template>
<script>
export default {
  mounted() {
    //创建地图中心点
    var map = new BMapGL.Map("container");
    map.centerAndZoom(new BMapGL.Point(108.954083, 34.323146), 17);
    map.enableScrollWheelZoom(true);
    //地图弹窗
    // map.addEventListener("tilesloaded", function () {
    //   alert("地图加载完成！");
    // });
    // 创建添加点标记
    var marker = new BMapGL.Marker(new BMapGL.Point(108.954083, 34.323146));
    var pt = new BMapGL.Point(108.953078, 34.323655);
    var pt2 = new BMapGL.Point(108.957012, 34.321087);
    var pt3 = new BMapGL.Point(108.952094, 34.320818);
    //独立设计点的图标
    var myIcon = new BMapGL.Icon(
      "../static/img/111.jpeg",
      new BMapGL.Size(40, 45)
    );
    var myIcon1 = new BMapGL.Icon(
      "../static/img/222.jpeg",
      new BMapGL.Size(50, 45)
    );
    var myIcon2 = new BMapGL.Icon(
      "../static/img/333.jpeg",
      new BMapGL.Size(50, 45)
    );
    var marker1 = new BMapGL.Marker(pt, { icon: myIcon });
    var marker2 = new BMapGL.Marker(pt2, { icon: myIcon1 });
    var marker3 = new BMapGL.Marker(pt3, { icon: myIcon2 });
    //把点加入到地图里面
    map.addOverlay(marker);
    map.addOverlay(marker1);
    map.addOverlay(marker2);
    map.addOverlay(marker3);
    // 创建图文信息窗口
    var sContent = `<h4 style='margin:0 0 5px 0;'>我得位置</h4>
    <img style='lift:right;margin:0 4px 22px' id='imgDemo' src='../static/img/44.jpg' width='130' height='80'/>
    <p style='margin:0;line-height:2.5;font-size:15px;text-indent:2em'>
    </p>`;
    var sContent1 = `<h4 style='margin:0 0 5px 0;'>车库1</h4>
    <img style='float:lift;margin:0 4px 22px' id='imgDemo1' src='../static/img/111.jpeg' width='130' height='80'/>
    <p style='margin:0;line-height:2.5;font-size:15px;text-indent:2em'>
   <a href="http://localhost:8080/#/zt_Stall">车库1</a>
    </p>`;
    var sContent2 = `<h4 style='margin:0 0 5px 0;'>车库2</h4>
    <img style='float:lift;margin:0 4px 22px' id='imgDemo2' src='../static/img/222.jpeg' width='139' height='104'/>
    <p style='margin:0;line-height:1.5;font-size:15px;text-indent:2em'>
   <a href="http://localhost:8080/#/zt_Stall">车库2</a>
    </p>`;
    var sContent3 = `<h4 style='margin:0 0 5px 0;'>车库3</h4>
    <img style='float:lift;margin:0 4px 22px' id='imgDemo3' src='../static/img/333.jpeg' width='139' height='104'/>
    <p style='margin:0;line-height:1.5;font-size:15px;text-indent:2em'>
   <a href="http://localhost:8080/#/zt_Stall">车库3</a>
    </p>`;
    var infoWindow = new BMapGL.InfoWindow(sContent);
    var infoWindow1 = new BMapGL.InfoWindow(sContent1);
    var infoWindow2 = new BMapGL.InfoWindow(sContent2);
    var infoWindow3 = new BMapGL.InfoWindow(sContent3);
    // marker添加点击事件
    marker.addEventListener("click", function () {
      this.openInfoWindow(infoWindow);
      // 图片加载完毕重绘infoWindow
      document.getElementById("imgDemo").onload = function () {
        infoWindow.redraw();
      };
    });
    marker1.addEventListener("click", function () {
      this.openInfoWindow(infoWindow1);
      // 图片加载完毕重绘infoWindow
      document.getElementById("imgDemo1").onload1 = function () {
        infoWindow1.redraw();
      };
    });
    marker2.addEventListener("click", function () {
      this.openInfoWindow(infoWindow2);
      // 图片加载完毕重绘infoWindow
      document.getElementById("imgDemo2").onload2 = function () {
        infoWindow2.redraw();
      };
    });
    marker3.addEventListener("click", function () {
      this.openInfoWindow(infoWindow3);
      // 图片加载完毕重绘infoWindow
      document.getElementById("imgDemo3").onload3 = function () {
        infoWindow3.redraw();
      };
    });
    //圆的绘制
    var circle = new BMapGL.Circle(
      new BMapGL.Point(108.954083, 34.323146),
      500,
      {
        strokeColor: "blue",
        strokeWeight: 2,
        strokeOpacity: 0.5,
      }
    );
    map.addOverlay(circle);
    //地图圆的拉扯
    function openEdit() {
      circle.enableEditing();
    }
    function closeEdit() {
      circle.disableEditing();
    }
  },
};
</script>
<style  scoped>
#container {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "微软雅黑";
}

ul li {
  list-style: none;
}

.drawing-panel {
  z-index: 999;
  position: fixed;
  bottom: 3.5rem;
  margin-left: 3rem;
  padding: 1rem 1rem;
  border-radius: 0.25rem;
  background-color: #fff;
  box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}

.btn {
  width: 150px;
  height: 30px;
  float: left;
  background-color: #fff;
  color: rgba(27, 142, 236, 1);
  font-size: 14px;
  border: 1px solid rgba(27, 142, 236, 1);
  border-radius: 5px;
  margin: 0 5px;
  text-align: center;
  line-height: 30px;
}
</style>